<template>
  <div class="box">
    <div id="app">
      <div v-for="(item, i) in keys" :key="item.id" class="appchildren" :style="[item.id <= 20 ? boderBottom : '', item.id % 5 === 0 ? '' : boderRight]" @click="fn(item.id, item.status)">
        <!-- {{ item.id }} -->
        <span v-if="item.status === 2" class="qizi" :class="item.state ? 'bai' : 'hei'"></span>
      </div>
    </div>
    <button v-show="!flag" @click="resetPage" class="btn">重新开始</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keys: [
        { id: 1, state: false, status: 1 },
        { id: 2, state: false, status: 1 },
        { id: 3, state: false, status: 1 },
        { id: 4, state: false, status: 1 },
        { id: 5, state: false, status: 1 },
        { id: 6, state: false, status: 1 },
        { id: 7, state: false, status: 1 },
        { id: 8, state: false, status: 1 },
        { id: 9, state: false, status: 1 },
        { id: 10, state: false, status: 1 },
        { id: 11, state: false, status: 1 },
        { id: 12, state: false, status: 1 },
        { id: 13, state: false, status: 1 },
        { id: 14, state: false, status: 1 },
        { id: 15, state: false, status: 1 },
        { id: 16, state: false, status: 1 },
        { id: 17, state: false, status: 1 },
        { id: 18, state: false, status: 1 },
        { id: 19, state: false, status: 1 },
        { id: 20, state: false, status: 1 },
        { id: 21, state: false, status: 1 },
        { id: 22, state: false, status: 1 },
        { id: 23, state: false, status: 1 },
        { id: 24, state: false, status: 1 },
        { id: 25, state: false, status: 1 }
      ],
      boderBottom: {
        'border-bottom': '1px solid #63B8FF'
      },
      boderRight: {
        'border-right': '1px solid #63B8FF'
      },
      stateArr: [],
      okArr: [
        [1, 6, 11, 16, 21],
        [2, 7, 12, 17, 22],
        [3, 8, 13, 18, 23],
        [4, 9, 14, 19, 24],
        [5, 10, 15, 20, 25],
        [1, 2, 3, 4, 5],
        [6, 7, 8, 9, 10],
        [11, 12, 13, 14, 15],
        [16, 17, 18, 19, 20],
        [21, 22, 23, 24, 25],
        [1, 7, 13, 19, 25],
        [5, 9, 13, 17, 21]
      ],
      flag: true
    }
  },
  methods: {
    fn(id, status) {
      if (this.flag) {
        if (status === 2) return false
        console.log(status, 'top', id)
        let obj = this.keys.find(v => v.id === id)
        obj.status = 2
        if (this.stateArr.length % 2 === 0) {
          this.stateArr.push(1)
          obj.state = true
        } else {
          this.stateArr.push(2)
          obj.state = false
        }

        if (this.stateArr.length > 6) {
          let successArr = []
          let errArr = []

          this.keys.forEach(item => {
            if (item.status === 2) {
              if (item.state) {
                console.log(item.id, 'id')
                successArr.push(item.id)
              } else {
                console.log(item.id, 'errid')

                errArr.push(item.id)
              }
            }
          })

          // successArr = successArr.join('')
          // errArr = errArr.join('')
          console.log(successArr, 'ok')
          console.log(errArr, 'err')
          for (var i = 0; i < this.okArr.length; i++) {
            let succindex = 0
            let errindex = 0
            for (var j = 0; j < this.okArr[i].length; j++) {
              // console.log(this.okArr[i][j])

              if (successArr.indexOf(this.okArr[i][j]) !== -1) {
                succindex++
                // console.log(succindex, 'index')
                // console.log(this.okArr[i][j], 'find')

                if (succindex === 5) {
                  console.log('正确胜利了', successArr)
                  setTimeout(() => {
                    alert('白棋胜利')
                  }, 0)
                  this.flag = false
                }
              }
              if (errArr.indexOf(this.okArr[i][j]) !== -1) {
                errindex++
                if (errindex === 5) {
                  console.log('错误胜利了', errArr)
                  setTimeout(() => {
                    alert('黑棋胜利')
                  }, 0)
                  this.flag = false
                }
              }
            }
          }

          if (this.stateArr.length === 25) {
            console.log(this.stateArr.length)
            this.flag = false
          }
          // this.okArr.some(kel => {
          //   if (successArr.indexOf(kel) !== -1) {
          //     setTimeout(() => {}, 0)
          //   }
          //   if (errArr.indexOf(kel) !== -1) {
          //     setTimeout(() => {
          //       this.flag = false
          //       return alert('xaxa胜利')
          //     }, 0)
          //   }
          // })
          // console.log(successArr)
          // console.log(errArr)
        }
      } else {
        alert('已有一方胜利,请重新开始')
      }
    },
    resetPage() {
      console.log(11)
      Object.assign(this.$data, this.$options.data())
    }
  }
}
</script>

<style lang="css" scoped>
html,
body,
.box {
  width: 100%;
  height: 100%;
}
#app {
  width: 600px;
  height: 600px;
  margin: 200px auto 0;
  background: #f0e68c;
  display: flex;
  flex-flow: row wrap;
  border: 10px solid #ba55d3;
}

.appchildren {
  width: 19.99%;
  height: 19.99%;
  text-align: center;
  /* padding-top: 10px; */
  box-sizing: border-box;
}

.qizi {
  width: 60%;
  height: 60%;
  border: 1px solid transparent;
  border-radius: 50%;
  display: inline-block;
  transform: translate(0, 30%);
}

.hei {
  background: #292929;
  box-shadow: 10px 0px 30px 8px #000;
}

.bai {
  background: #f7f7f7;
  box-shadow: 10px 0 40px 8px #fffafa;
}

.btn {
  width: 200px;
  height: 50px;
  font-size: 16px;
  background: #d1eeee;
  color: #ffd700;
  font-weight: 900;
  border: 1px solid #eee; /* position: relative;
  bottom: 0;
  left: 0; */
}
</style>
